<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的客户</title>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        .Button_operation {
            width: 360px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form :inline="true" ref="form" :model="formData" label-width="80px">
        <el-form-item label="选择地区:">
            <el-cascader
                    v-model="formData.area"
                    ref="cascader"
                    :props="casProps"
                    clearable/>
        </el-form-item>
        <el-form-item label="客户名称:">
            <el-input v-model="formData.companyName" placeholder="请输入内容" w></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <div style="border: 1px solid #ddd;border-radius: 2px;width: 100%;height: 500px;" >
        <div style="border: 1px solid #ddd;border-radius: 2px;height: 50px;line-height: 45px;padding: 5px;">
            <el-button type="primary" onclick="window.location.href = '/clientele-list.html'">企业查询</el-button>
            <el-button type="success" onclick="window.location.href = '/addClients.html'">手动添加</el-button>
        </div>
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        label="序号"
                        width="150"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="客户名称"
                        width="250"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.scompany.companyName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="区域"
                        width="250"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.scompany.companyProvince }}{{ scope.row.scompany.companyCity }}{{ scope.row.scompany.companyArea }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="主要经营"
                        width="200"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.scompany.businessScope }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="联系人"
                        width="200"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.scompany.legal }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="联系电话"
                        width="150"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.scompany.legalTel }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="返利"
                        width="200"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.rebateAmount }}元返利{{ scope.row.rebateRate }}%</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="备注"
                        width="150"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.rremark }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="合同有无"
                        width="150"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{scope.row.contract==0?'无':'有'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="203"
                        align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="showContract(scope.row)">合同</el-button>
                        <el-button type="text" size="small" @click="toUntitl(scope.row)">管理</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-dialog
                title="合同信息"
                :visible.sync="dialogVisible"
                width="30%">
            <div class="Button_operation" style="text-align: center">
                <span>合同名称：</span>
                <span>{{contractName}}</span>
            </div>
            <span slot="footer" class="dialog-footer">
                <div class="Button_operation" style="text-align: center">
                    <el-button type="primary" @click="download">下载附件</el-button>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                </div>
            </span>
        </el-dialog>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="loadPage"
                    :current-page.sync="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="sizes, prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </div>

</div>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                loading:true,
                formData: {
                    area:[],
                    companyName:''
                },
                total: 0,//总页数
                currentPage: 1,//当前页数
                pageSize: 5,//每页条数
                tableData:[],
                sCompany:{
                    companyProvince:'',
                    companyCity:'',
                    companyArea:'',
                    companyName:'',
                },
                contractName:'',
                contractId:'',
                dialogVisible:false,
                casProps: {
                    lazy: true, // 此处必须为true
                    checkStrictly: true,
                    lazyLoad(node, resolve){
                        const { level } = node;
                        setTimeout(() => {
                            if (level===0){
                                axios.get('/Project').then(value => {
                                    if (value.data.state==1){
                                        const nodes = value.data.data.map(item => ({
                                                value: item.areaId,
                                                label: item.areaName,
                                                leaf: level >= 2
                                            }));
                                        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                                        resolve(nodes);
                                    }

                                })
                            }else if (level===1){
                                axios.get('/child/'+node.value).then(value => {
                                    if (value.data.state==1){
                                        const nodes = value.data.data.map(item => ({
                                            value: item.areaId,
                                            label: item.areaName,
                                            leaf: level >= 2
                                        }));
                                        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                                        resolve(nodes);
                                    }

                                })
                            }else {
                                axios.get('/child/'+node.value).then(value => {
                                    if (value.data.state==1){
                                        const nodes = value.data.data.map(item => ({
                                            value: item.areaId,
                                            label: item.areaName,
                                            leaf: level >= 2
                                        }));
                                        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                                        resolve(nodes);
                                    }

                                })
                            }

                        }, 100);
                    }
                },
            }
        },
        //方法
        methods:{
            download(){
                axios.get("/download/"+this.contractId).then(value => {
                    if (value.data.state==1){
                        this.$message("成功！");
                    }
                })
            },
            showContract(row){
                if (row.contract==0){
                    this.$message("没有合同！");
                }else {
                    axios.get("/contract/"+row.contract).then(value => {
                        if (value.data.state==1){
                            this.contractName=value.data.data.name;
                            this.contractId=value.data.data.id;
                            this.dialogVisible=true;
                        }
                    })
                }
            },
            toUntitl(row){
                localStorage.setItem("companyId",row.scompany.id);
                localStorage.setItem("relationId",row.id);
                location.href='/untitl.html';
            },
            //更换每页行数
            handleSizeChange(val) {
                this.pageSize=val;
                this.loadPage(this.currentPage,val);
            },
            //点击查询
            onSubmit(){
                if (this.$refs['cascader'].getCheckedNodes().length>0){
                    this.sCompany.companyProvince=this.$refs['cascader'].getCheckedNodes()[0].pathLabels[0];
                    this.sCompany.companyCity=this.$refs['cascader'].getCheckedNodes()[0].pathLabels[1];
                    this.sCompany.companyArea=this.$refs['cascader'].getCheckedNodes()[0].pathLabels[2];
                }else {
                    this.sCompany.companyProvince='';
                    this.sCompany.companyCity='';
                    this.sCompany.companyArea='';
                }

                this.sCompany.companyName=this.formData.companyName;
                this.loadPage(this.currentPage,this.pageSize);
            },
            //分页
            loadPage(current,page){
                this.loading=true;
                if (page==undefined){
                    page=this.pageSize;
                }
                this.currentPage = current;
                axios.post("/TRelations/"+current+"/"+page,this.sCompany).then(value => {
                    if (value.data.state==1){
                        this.tableData=value.data.data.records;
                        this.total=value.data.data.total;
                        this.currentPage=value.data.data.current;
                        this.pageSize=value.data.data.size;
                        this.loading=false;
                    }
                })
            }
        },
        //挂载
        mounted(){
            this.loadPage(1,5);
        }
    })
</script>
</body>
</html>